<!--
/**
* Author: linchun
* Date: 2022-07-25 16:43
* Desc: 忘记密码 forgetPwd
*/
-->
<template>
  <yy-page custom-class="page pageWhiteBg">
    <view class="forgetPwd-page" :style="{ 'padding-bottom': safeBottom + 'rpx' }">
      <view class="forgetPwd-page__H5 flex-col flex-c-m">
        <!-- 图标 -->
        <zm-image :src="'/login-logo.jpg'" is-join custom-style="width:540rpx;height:180rpx"></zm-image>
        <!-- 登录表单 -->
        <view class="form-box">
          <!-- 标题 -->
          <view class="title"> 忘记密码 </view>
          <view>
            <!-- 账号 -->
            <zm-input
              type="number"
              placeholder="请输入手机号"
              class="input"
              :border="'bottom'"
              :icon-size="'25'"
              :custom-style="{
                borderBottom: '1rpx solid #eee',
                padding: '20rpx 0'
              }"
              :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
              :prefix-icon-style="{ marginRight: '20rpx' }"
              :prefix-icon="'login-account'"
              v-model="form.mobile"
              @input="handleMobileInput"
            />
            <!-- 验证码 -->
            <zm-input
              type="number"
              :maxlength="6"
              placeholder="请输入验证码"
              class="input"
              :border="'bottom'"
              :icon-size="'25'"
              :custom-style="{
                borderBottom: '1rpx solid #eee',
                padding: '20rpx 0'
              }"
              :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
              :prefix-icon-style="{ marginRight: '20rpx' }"
              :prefix-icon="'login-check'"
              v-model="form.code"
              @input="handleCodeInput"
            >
              <template slot="suffix">
                <yy-send-code :second="expire" @myTap="handleSendCode" @finish="handleCountDownFinish" ref="sendCode" slot="button" />
              </template>
            </zm-input>
            <!-- 新密码 -->
            <zm-input
              type="password"
              placeholder="请输入新密码"
              class="input"
              :border="'bottom'"
              :icon-size="'25'"
              :custom-style="{
                borderBottom: '1rpx solid #eee',
                padding: '20rpx 0'
              }"
              :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
              :prefix-icon-style="{ marginRight: '20rpx' }"
              :prefix-icon="'login-password'"
              v-model="form.newPwd"
              @input="handleNewPwdInput"
            />
            <!-- 确认密码 -->
            <zm-input
              type="password"
              placeholder="请再次输入密码"
              class="input"
              :border="'bottom'"
              :icon-size="'25'"
              :custom-style="{
                borderBottom: '1rpx solid #eee',
                padding: '20rpx 0'
              }"
              :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
              :prefix-icon-style="{ marginRight: '20rpx' }"
              :prefix-icon="'login-password'"
              v-model="form.confirmPwd"
              @input="handleConfirmPwdInput"
            />
          </view>
          <!-- 提交按钮 -->
          <yy-button
            custom-class="login-btn"
            :custom-style="{
              height: '100rpx',
              borderRadius: '200rpx',
              fontSize: '32rpx'
            }"
            :disabled="isDisabled"
            @click="handleSubmit"
            >确认密码</yy-button
          >
        </view>
      </view>
    </view>
  </yy-page>
</template>
<script>
  import ZmImage from '@/commons/ZmImage/index.vue'
  import ZmInput from '@/commons/ZmInput/index.vue'
  import pageMixins from '@/mixins/pageMixins'
  import { toast } from '@/utils/message'
  import * as auth from '@/utils/auth'
  import * as utils from '@/utils/index'

  export default {
    mixins: [pageMixins],
    components: {
      ZmInput,
      ZmImage
    },
    data() {
      return {
        form: {
          mobile: '',
          code: '',
          newPwd: '',
          confirmPwd: ''
        },
        safeBottom: getApp().globalData.safeBottom || 20,
        isDisabled: true,
        isSend: false, //是否发送验证码
        expire: 60
      }
    },
    onLoad(options) {},
    onReady() {},
    onShow() {},
    methods: {
      //初始化方法
      init() {},
      handleCountDownFinish() {
        this.isSend = false
      },
      handleSendCode() {
        if (!this.form.mobile) {
          this.$msg.toast('请输入手机号')
          return
        }
        const data = {
          mobile: this.form.mobile,
          codeType: 'resetPwd',
          deviceType: 'h5'
        }
        uni.$api.public
          .sendSms(data)
          .then((res) => {
            this.isSend = true
            this.$msg.toast('短信验证码发送成功')
            console.log('res.expire', res.expire)
            this.expire = +res.expire || 60
            this.$nextTick(() => {
              this.$refs.sendCode.begin()
            })
          })
          .catch((err) => {
            this.$msg.toast((err.data && err.data.content) || '发送失败,请稍后再试')
            this.isSend = true
            this.form.code = ''
            const timer = setTimeout(() => {
              clearTimeout(timer)
              this.isSend = false //5秒后可重新发送验证码
            }, 5000)
          })
      },
      handleMobileInput(val) {
        this.form.moible = val
        this.changeDisabledStatus()
      },
      handleCodeInput(val) {
        this.form.code = val
        this.changeDisabledStatus()
      },
      handleNewPwdInput(val) {
        this.form.newPwd = val
        this.changeDisabledStatus()
      },
      handleConfirmPwdInput(val) {
        this.form.confirmPwd = val
        this.changeDisabledStatus()
      },
      changeDisabledStatus() {
        if (
          this.form.mobile && //手机号
          this.form.code && //验证码
          this.form.newPwd && //新密码
          this.form.confirmPwd //确认密码
        ) {
          this.isDisabled = false
        } else {
          this.isDisabled = true
        }
      },
      validateInput() {
        let str = ''
        if (!this.form.mobile) {
          str = '手机号不能为空'
        } else if (!auth.validateTel(this.form.mobile)) {
          str = '手机号输入有误'
        } else if (!this.form.code) {
          str = '验证码不能为空'
        } else if (!this.form.newPwd) {
          str = '新密码不能为空'
        } else if (!this.form.confirmPwd) {
          str = '确认密码不能为空'
        } else if (this.form.newPwd !== this.form.confirmPwd) {
          str = '新密码和确认密码不一致'
        }
        return str
      },
      handleSubmit() {
        // const form = this.handleForm()
        if (this.isDisabled) {
          //按钮禁用
          return
        }
        const msg = this.validateInput()
        if (msg) {
          toast(msg)
          return
        }
        if (!this.isSend) {
          toast('请先发送短信获取验证码')
          this.form.code = ''
          return
        }
        uni.$api.user
          .resetPwd(this.form)
          .then((res) => {
            console.log('res1222', res)
            // this.isLogin = true
            // const token = res.data
            toast('密码重置成功')
            uni.navigateTo({ url: '/pages/login/index' })
            // auth.toGetUserInfo(true).then((res) => {
            //   console.log('res222', res)
            //   this.loginCb(res)
            //   getApp().globalData.isReload = ''
            // })
            // this.loginCb(res)
            // auth.getUserInfo(true).then(async () => {
            //   const redirect = this.$route.query.redirect
            //   this.$msg.hide()
            //   auth.getUserInfo(true)
            //   await this.checkBindCard()
            //   if (redirect) {
            //     this.$router.go(-1)
            //   } else {
            //     this.$router.replace('/index/home')
            //   }
            //   setTimeout(() => {
            //     this.$root.reload()
            //   }, 300)
            // })
          })
          .catch((err) => {
            toast((err.data && err.data.content) || '重置失败')
          })
      },
      handleForm() {
        const form = utils.deep(this.form)
        // const { newPwd, confirmPwd } = form
        // form.newPwd = Encrypt(JSON.stringify({ newPwd }))
        // form.confirmPwd = Encrypt(JSON.stringify({ confirmPwd }))
        return form
      }
    }
  }
</script>

<style lang="scss">
  .page {
    height: 100vh;
    overflow-y: hidden;
    box-sizing: border-box;
    .forgetPwd-page {
      position: relative;
      min-height: 100vh;
      box-sizing: border-box;
      padding: 80rpx 40rpx 45rpx 40rpx;
      &__H5 {
        .logo {
          width: 540rpx;
          height: 180rpx;
        }
        .form-box {
          width: 100%;
          font-size: 32rpx;
          margin-top: 80rpx;
          .title {
            font-size: 48rpx;
            color: #222;
            font-weight: bold;
            margin-bottom: 100rpx;
          }
          .login-btn {
            margin-top: 100rpx;
          }
          // .sendCode {
          //   font-size: 26rpx;
          // }
        }
        .other {
          width: 100%;
          margin-top: 30rpx;
        }
        .login-footer {
          font-size: 24rpx;
          position: absolute;
          bottom: 45rpx;
        }
      }
      &__tip {
        color: lighten($mainColor, 10%);
        font-size: 24rpx;
        position: fixed;
        bottom: 70rpx;
        width: 100%;
        left: 0;
      }

      &__icon {
        width: 22rpx;
        height: 22rpx;
      }
      .login-wx {
        width: 130rpx;
        background: #fff;
        padding: 0;
        margin-top: 100rpx;
        border: none;
        .wechat-img {
          width: 44rpx;
          height: 44rpx;
          margin: 0 18rpx;
        }
      }
      .login-wx::after {
        border: none !important;
      }
    }
  }
</style>
